<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>学而思TDM系统</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/tdm.css" rel="stylesheet">
  <script src="/static/js/jquery.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/jquery.flot.js"></script>
  <script src="/static/js/jquery.flot.time.js"></script>
  <script src="/static/js/jquery.flot.pie.min.js"></script>
  <script src="/static/js/date.js"></script>
  <script src="/static/js/view_server_item.js" type="text/javascript"></script>

  <script type="text/javascript">
  function labelFormatter(label, series) {
    return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
  }

  $(function() {

    var lines_options = {
      lines:  { show: true },
      points: { show: true },
      xaxis:  { mode: "time", timezone: "browser" },
      yaxis:  { ticks: 10, min: 0, tickDecimals: 2 },
      legend: { position: "nw" }, /* or "nw" or "se" or "sw" */
    };
    var pie_options = {
      series: {
        pie: { show: true, radius: 1, label: { show: true, radius: 2/3, formatter: pie_label_formatter } }
      },
      legend: { show: false },
    };

    var data = [];
    /*$.plot("#port_flot", data, options);*/

    // Fetch one series, adding to what we already have
    //var alreadyFetched = {};

    server_json_dataurl = "http://192.168.4.252:8103/json/item/%E5%8C%97%E4%BA%AC/%E5%92%8C%E7%9B%9B%E5%A4%A7%E5%8E%A6/server/";
    file_dataurl = ["debian_file_passwd/", "debian_file_hosts/"];
    /*alert(diskload_dataurl);*/

    $.each(file_dataurl, function(pi, pn) {
      $.ajax({
        url: server_json_dataurl + pn,
        type: "GET",
        dataType: "json",
        success: function(msg) {
          /*$.plot("#port_flot", msg, lines_options);*/
          $.each(msg, function(i, n) {
            //console.log(n.label, n.data);
            var re = /([^_]+)_([^_]+)_(.+)/g;
            var file_field = re.exec(n.label);
            //console.log(file_field);
            $("#file_table").append('<tr><td>'+file_field[3]+'</td><td>'+n.data[0][1]+'</td></tr>');
          });
        },
      });

    });
    /*
    $.ajax({
      url: memload_dataurl,
      type: "GET",
      dataType: "json",
      success: function(msg) {
        $.plot("#memload_flot", msg, options);
      },
    });

    $.ajax({
      url: procnr_dataurl,
      type: "GET",
      dataType: "json",
      success: function(msg) {
        $.plot("#procnr_flot", msg, options);
      },
    });
*/

  });
  </script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">学而思教学设备管理系统TDM</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Dashboard</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="/admin">Admin</a></li>
          <li><a href="#">Help</a></li>
        </ul>
        <form class="navbar-form navbar-right">
          <input type="text" class="form-control" placeholder="Search...">
        </form>
      </div>
    </div>
  </nav>

  <p>&nbsp;</p>

  <div class="container-fluid">

    {% for item_name in item_name_list %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <a href="#page-stats" class="panel-heading" data-toggle="collapse">{{item_name}}</a>
      </div>
      <!-- Table -->
      <table id="file_table" class="table">
        <tr><th>file</th><th>status</th></tr>
      </table>
    </div>
    {% endfor %}
  </div>
</body>
</html>
